<template>
    <div class="my-info">
        <el-card>
            <div class="img">
                <el-upload class="avatar-uploader" action="http://134.175.252.64:8080/file/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="form">
                <el-form label-width="80px" :model="formLabelAlign">
                    <el-form-item prop="userAccount" label="账号">
                        <el-input size="small" v-model="formLabelAlign.userAccount" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="username" label="用户名">
                        <el-input size="small" v-model="formLabelAlign.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="userTel" label="电话">
                        <el-input size="small" v-model="formLabelAlign.userTel"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱">
                        <el-input size="small" v-model="formLabelAlign.email"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="btn">
                <el-button type="primary" size="small" @click="save">保存</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'MyInfo',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            formLabelAlign: {
                avatarUrl: '',
                userTel: '',
                email: '',
                userAccount: '',
                username: ''
            },
            imageUrl: ''
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),
    },
    watch: {

    },
    mounted() {
        this.formLabelAlign = this.userInfo
        this.imageUrl = this.userInfo.avatarUrl
    },
    methods: {
        ...mapMutations('userStore', ['updateUserInfo']),
        save() {
            const obj = {
                avatarUrl: this.imageUrl,
                userTel: this.formLabelAlign.userTel,
                email: this.formLabelAlign.email,
                username: this.formLabelAlign.username,
                // type: 0//0代表管理员
            }
            this.updateUserInfo(obj)
            this.formLabelAlign = this.userInfo
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.imageUrl = res.data.url
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>
<style lang='less' scoped>
.my-info {
    width: 50%;

    .img {
        width: 100%;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: block;
        }
    }

    .form {
        padding: 10px 50px 10px 20px;
        background-color: white;

        .el-form-item {
            margin-bottom: 15px !important;
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        padding-bottom: 20px;

        .el-button--primary {
            color: white;
            background-color: #11A983;
        }
    }
}
</style>